@import '~/src/styles/colors.less';

.component-products-list {

  .title {
    font-weight: bold;
    margin-top : 1rem;
  }

  .list-container {
    display        : flex;
    width          : 100%;
    flex-wrap      : wrap;
    justify-content: flex-start;
    overflow       : hidden;


    .itemWraper {
      flex      : 0 0 50%;
      box-sizing: border-box;
      overflow     : hidden;

      &:nth-of-type(odd) {
        .item {

          margin-left : 0;
          margin-right: 0.5rem;
        }
      }

      &:nth-of-type(even) {
        .item {
          margin-right: 0;
          margin-left : 0.5rem;
        }
      }

      .item {
        margin-top      : 1rem;
        background-color: #fff;
        border-radius   : 0.5rem;
        overflow        : hidden;

        .image-wraper {
          height: 10rem;
          width : 100%;

          .image {
            height: 100%;
            width : 100%;
          }
        }

        .name {
          font-weight  : bolder;
          margin       : 0.5rem;
          margin-bottom: 0;
          height       : 2.3rem;
          font-size    : 0.85rem;
          overflow     : hidden;
        }

        .description {
          font-size    : 0.8rem;
          color        : #ccc;
          margin       : 0.2rem 10px 0 10px;
          overflow     : hidden;
          text-overflow: ellipsis;
          white-space  : nowrap;
				  height   : 36rpx;
        }

        .price-info {
          margin       : 0.5rem;
          overflow     : hidden;
          text-overflow: ellipsis;
          white-space  : nowrap;

          .price {
            font-weight : 600;
            margin-right: 4px;
            font-size   : 0.85rem;
            color       : @purple100;
          }

          .strikethrough {
            text-decoration: line-through;
            font-size      : 0.8rem;
            color          : #ccc;
          }
        }
      }
    }
  }
}